<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>查询学生信息</title>
    <script type="text/javascript" src="../js/vue.js"></script>
    <script type="text/javascript" src="../js/axios.min.js"></script>
    <script type="text/javascript" src="../js/index.js"></script>
    <link type="text/css" rel="stylesheet" href="../css/index.css">
</head>
<body>
<div id="app">

    <el-form :inline="true" :model="queryStudent" class="demo-form-inline">
        <el-form-item label="ID">
            <el-input v-model="queryStudent.sid" placeholder="请输入ID"></el-input>
        </el-form-item>
        <el-form-item label="学生姓名">
            <el-input v-model="queryStudent.name" placeholder="请输入学生姓名"></el-input>
        </el-form-item>
        <el-form-item label="班级名称">
            <el-input v-model="queryStudent.cname" placeholder="请输入班级名称"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="onSubmit">搜索</el-button>
        </el-form-item>

        <el-table
                :data="tableData"
                border
                style="width: 100%">
            <el-table-column
                    prop="sid"
                    label="学生ID">
            </el-table-column>
            <el-table-column
                    prop="name"
                    label="学生姓名">
            </el-table-column>
            <el-table-column
                    prop="age"
                    label="学生年龄">
            </el-table-column>
            <el-table-column
                    prop="class1.cname"
                    label="班级名称">
            </el-table-column>
            <el-table-column
                    fixed="right"
                    label="操作">
                <template slot-scope="scope">
                    <el-button type="success" icon="el-icon-edit" size="small" @click="edit(scope.row)">编辑</el-button>
                    <el-button type="danger" icon="el-icon-delete" size="small" @click="del(scope.row)">删除</el-button>
                </template>
            </el-table-column>

        </el-table>

        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="pageSizes"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
        </el-pagination>

        <el-dialog
                title="提示"
                :visible.sync="dialogVisible"
                width="30%">
            <el-form :model="editStudentFrom" :model="cname" label-width="100px" class="demo-ruleForm">
                <el-form-item label="学生姓名" prop="name">
                    <el-input v-model="editStudentFrom.sname"></el-input>
                </el-form-item>
                <el-form-item label="学生年龄" prop="age">
                    <el-input v-model="editStudentFrom.age"></el-input>
                </el-form-item>
                <el-form-item label="学生班级" prop="cname">
                    <el-select v-model="cname" placeholder="请输入学生班级">
                        <el-option label="23" value="1"></el-option>
                        <el-option label="34" value="2"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取消</el-button>
    <el-button type="primary" @click="editFrom">修改</el-button>
  </span>
        </el-dialog>
    </el-form>
</div>

</body>
<script>
    let app = new Vue({
        el:"#app",
        data:{
            tableData: [], //接收数据
            currentPage:1, //表示第几页
            pageSizes:[5,10,15,20],
            pageSize:5, //表示一页多少条
            total:0,  //表示总条数
            queryStudent:{},
            editStudentFrom:{},
            dialogVisible:false,
            cname:"",
        },

        created(){
            this.initTable()
        },

        methods:{

            initTable(){
                axios.post("http://localhost:8080/student/findAll/"+this.currentPage +"/" + this.pageSize,this.queryStudent).then(result=>{
                    console.log(result)
                    this.tableData = result.data.data.data.records
                    this.total = result.data.data.total
                })
            },
            //修改每页显示条数
            handleSizeChange(val) {
                this.pageSize = val
                this.initTable()
            },
            //修改查看第几页
            handleCurrentChange(val) {
                this.currentPage = val
                this.initTable()
            },
            onSubmit(){
                this.initTable()
            },


            //点击编辑弹出对话框
            edit(row){
                this.dialogVisible = true   //为true 显示对话框
                this.editStudentFrom = row  //用于数据回显
            },


            //点击修改触发事件
            editFrom(){
                this.dialogVisible = false  //为false 隐藏对话框
                this.editStudentFrom.cid = parseInt(this.cname) //用于修改班级
                this.cname=""
                //异步调用  修改数据
                axios.put("http://localhost:8080/student/updateStudent/",this.editStudentFrom).then(result=>{

                    this.$message.success(result.data.msg)
                    this.initTable()
                })
            },

            //修改每页显示条数
            handleSizeChange(val) {
                this.pageSize = val
                this.initTable()
            },
            //修改查看第几页
            handleCurrentChange(val) {
                this.currentPage = val
                this.initTable()
            },
            onSubmit(){
                this.initTable()
            },
        }
    })
</script>
</html>